<!-- 评论管理 -->
<template>
  <div class="home">
    <div>
      <div style="padding: 10px">
        <el-tag color="#f76742" effect="dark" @click="addStandard">
          <el-icon>
            <Plus />
          </el-icon>
          添加规格
        </el-tag>
        <div>
          <el-row
            align="middle"
            :gutter="15"
            v-for="(item, index) in standardList"
            :key="item"
          >
            <el-col :span="16">
              <el-input
                v-model="item.name"
                placeholder="请输入规格名称"
              ></el-input>
            </el-col>
            <el-col :span="7"
              ><span
                style="font-size: 10px; color: #6dbae8"
                @click="addValue(index)"
                >添加规格值</span
              ></el-col
            >
            <el-col :span="1">
              <el-icon :size="13" color="#cccccc" @click="deleStandard(index)">
                <CircleCloseFilled />
              </el-icon>
            </el-col>
            <el-col :span="24" style="height: 10px"></el-col>
            <el-col :span="4" v-for="(v, i) in item.values" :key="v">
              <el-input
                v-model="v.value"
                style="position: relative"
                placeholder="请输入规格值"
              ></el-input>
              <el-icon
                style="position: absolute"
                :size="13"
                color="#cccccc"
                @click="deleValue(index, i)"
              >
                <CircleCloseFilled />
              </el-icon>
            </el-col>
          </el-row>
        </div>
      </div>
      <el-tag
        color="#f76742"
        style="margin-top: 10px"
        effect="dark"
        @click="computTable"
      >
        <el-icon>
          <Refresh />
        </el-icon>
        刷新
      </el-tag>
      <div>
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column
            v-for="item in labels"
            :key="item"
            :prop="'id_' + item"
            :label="item"
          />
          <el-table-column label="销售价">
            <template #default="data">
              <el-input v-model="data.row.price"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { Plus, Refresh, CircleCloseFilled } from "@element-plus/icons-vue";

export default {
  components: {
    Plus,
    Refresh,
    CircleCloseFilled,
  },
  data() {
    return {
      tableData: [],
      standardList: [],
      labels: [],
    };
  },
  methods: {
    addStandard() {
      //添加规格
      let obj = {
        values: [],
        name: "",
      };
      if (this.standardList.length < 3) {
        this.standardList.push(obj);
        return;
      }
      ElMessage.info("最大只能填写三个规格");
    },
    deleStandard(index) {
      //删除规格
      this.standardList.splice(index, 1);
    },
    addValue(index) {
      //添加规格值
      this.standardList[index].values.push({ value: "" });
    },
    deleValue(index, itemIndex) {
      //删除规格值
      this.standardList[index].values.splice(itemIndex, 1);
    },
    computTable() {
      //计算表格
      let { labels, values } = this.computData;
      this.labels = labels; //设置表头
      values = values.filter((i) => i.length); //去除空的数组
      if (values.length == 0) return (this.tableData = []); //清空数组
      let list = this.cartesianProductOf(values);
      this.tableData = list.map((item) => {
        let obj = {
          price: 0,
        };
        for (let i = 0; i < item.length; i++) {
          obj["id_" + labels[i]] = item[i];
        }
        return obj;
      });
    },
    // 笛卡尔积算法
    cartesianProductOf(list) {
      list.forEach((item) => {
        if (item.length == 0) item.push(null);
      }); //当树组tag为空时,添加用于计算
      return list.reduce(
        (total, next) => {
          var array = [];
          total.forEach((item) => {
            next.forEach((item2) => {
              array.push(item.concat([item2]));
            });
          });
          return array;
        },
        [[]]
      );
    },
  },
  computed: {
    computData() {
      let labels = this.standardList.map((item) => item.name);
      let values = this.standardList.map((item) =>
        item.values.map((v) => v.value)
      );
      return { labels, values };
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  display: flex;
  justify-content: center;
  background: #f1f2f6;
}
.home > div {
  width: 100%;

  // display: flex;
  // flex-direction:column;
  // justify-content: space-between;
  div {
    background: #f9f9fa;
    .el-row {
      margin: 10px 0px;
    }
  }
}
</style>
